<template>
  <div v-loading="tableLoading" class="gl_contentBox gl_heightFull">
    <el-button type="primary" :loading="submitLoading" size="mini" @click="setPosting()">创建发布费用模板</el-button>
    <div v-for="(item, index) in tableData" :key="index">
      <div class="gl_mt_20 nav_top">
        <div>
          <span class="text_algin">模板名称</span>
          <span class="text_algin text_nav">{{ item.name }}</span>
        </div>
        <div>
          <span class="text_algin">模板类型</span>
          <span class="text_algin text_nav">{{ item.trainning?'培训':'' }}{{ item.competition? item.trainning?'/赛事':'赛事':'' }}</span>
        </div>
        <div>
          <el-button size="mini" type="primary" @click="edit(item, index)">编辑</el-button>
          <el-button size="mini" :loading="colseLoading" type="danger" @click="deleteTem(item.id)">删除</el-button>
        </div>
      </div>
      <el-table :data="item.publishCharges" size="mini" class="gl_table_noBorder">
        <el-table-column v-if="item.settingTypeCode==='District'" label="地区">
          <template slot-scope="{row}">
            <span v-for="(jtem, jndex) in row.publishChargeDistricts" :key="jndex" style="margin-right:8px">
              {{ jtem.cityName?jtem.cityName:jtem.provinceName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else label="机构">
          <template slot-scope="{row}">
            <span v-for="(jtem, jndex) in row.publishChargeDelegations" :key="jndex" style="margin-right:8px">
              {{ jtem.delegationName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="费用" prop="amount" width="100" align="center">
          <template slot-scope="{row}">
            {{ (row.amount/100).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <openPosting ref="refPosting" />
  </div>
</template>

<script>
import openPosting from './openPosting.vue';
import { api_GET_ApiEventsManagementPublishChargeTemplate, api_DELETE_ApiEventsManagementPublishChargeTemplate } from '@/extend/api/postingcharge.js';
export default {
  components: { openPosting },
  data() {
    return {
      colseLoading: false,
      submitLoading: false,
      tableLoading: false,
      tableData: [],
      tableDataReg: [],
      tableDataDelegation: []
    };
  },
  created() {
    this.gettableData();
  },
  methods: {
    // 获取数据
    gettableData() {
      this.tableLoading = true;
      api_GET_ApiEventsManagementPublishChargeTemplate({ 'IncludePublishChargeType': true, 'IncludePublishCharge': true, 'IncludePublishChargeDetails': true }).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.tableDataReg = [];
        this.tableDataDelegation = [];
        this.tableData.map((res, index) => {
          if (res.settingTypeCode === 'District') {
            res.publishCharges.map(jes => {
              jes.publishChargeDistricts.map(nes => {
                if (nes.cityCode !== null) {
                  this.tableDataReg.push({ 'code': nes.cityCode, 'trainning': res.trainning, 'competition': res.competition });
                } else {
                  this.tableDataReg.push({ 'code': nes.provinceCode, 'trainning': res.trainning, 'competition': res.competition });
                }
              });
            });
          } else {
            res.publishCharges.map(jes => {
              jes.publishChargeDelegations.map(nes => {
                this.tableDataDelegation.push({ 'code': nes.delegationId, 'trainning': res.trainning, 'competition': res.competition });
              });
            });
          }
        });
        console.log(this.tableDataReg, this.tableDataDelegation);
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 创建发布费用模板
    setPosting() {
      this.$refs.refPosting.addedit = 'add';
      this.$refs.refPosting.postingDialogVisible = true;
      this.$refs.refPosting.create = [this.tableDataReg, this.tableDataDelegation];
      console.log(this.tableDataDelegation);
    },
    // 编辑
    edit(res) {
      this.$refs.refPosting.addedit = 'edit';
      this.$refs.refPosting.id = res.id;
      this.$refs.refPosting.Api_GET_setPostingCharges.name = res.name;
      if (res.competition === true) {
        this.$refs.refPosting.Api_GET_setPostingCharges.checkList.push('赛事');
      }
      if (res.trainning === true) {
        this.$refs.refPosting.Api_GET_setPostingCharges.checkList.push('培训');
      }
      this.$refs.refPosting.Api_GET_setPostingCharges.settingTypeCode = res.settingTypeCode;
      this.$refs.refPosting.tableDataReg = [];
      this.$refs.refPosting.tableDataDelegation = [];
      if (res.settingTypeCode === 'District') {
        res.publishCharges.map((jes, index) => {
          this.$refs.refPosting.tableDataReg.push({});
          this.$refs.refPosting.tableDataReg[index].amount = Math.round((jes.amount * 100) * 1000) / 10000000;
          const codearr = [];
          const namearr = [];
          jes.publishChargeDistricts.map(nes => {
            if (nes.cityCode === null) {
              codearr.push(nes.provinceCode);
              namearr.push(nes.provinceName);
            } else {
              codearr.push(nes.cityCode);
              namearr.push(nes.cityName);
            }
          });
          this.tableDataReg = this.tableDataReg.filter(item => {
            return codearr.indexOf(item.code) === -1;
          });
          this.$refs.refPosting.create = [this.tableDataReg, this.tableDataDelegation];
          this.$set(this.$refs.refPosting.tableDataReg[index], 'publishChargeDistricts', codearr);
          this.$set(this.$refs.refPosting.tableDataReg[index], 'publishChargename', namearr);

          console.log(this.$refs.refPosting.tableDataReg);
        });
      } else {
        res.publishCharges.map((jes, index) => {
          this.$refs.refPosting.tableDataDelegation.push({});
          this.$refs.refPosting.tableDataDelegation[index].amount = Math.round((jes.amount * 100) * 1000) / 10000000;
          const codearr = [];
          const namearr = [];
          jes.publishChargeDelegations.map(nes => {
            codearr.push(nes.delegationId);
            namearr.push(nes.delegationName);
          });
          this.tableDataDelegation = this.tableDataDelegation.filter(item => {
            return codearr.indexOf(item.code) === -1;
          });

          this.$refs.refPosting.create = [this.tableDataReg, this.tableDataDelegation];
          this.$set(this.$refs.refPosting.tableDataDelegation[index], 'publishChargeDelegationIds', codearr);
          this.$set(this.$refs.refPosting.tableDataDelegation[index], 'publishChargeDelegationName', namearr);
        });
      }
      this.$refs.refPosting.postingDialogVisible = true;
      this.$refs.refPosting.title = '编辑发布费用模板';
    },
    // 删除
    deleteTem(res) {
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_ApiEventsManagementPublishChargeTemplate(res).then(() => {
          this.gettableData();
          this.$message({ type: 'success', message: '删除成功！' });
        }, () => {
          this.$message({ type: 'error', message: '删除失败！' });
        });
      }).catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.nav_top {
    display: flex;
    justify-content: space-between;
    align-content: center;
    font-size: 16px;
    font-weight: 900;
    vertical-align: bottom;
    margin-bottom: 15px;
}
.text_algin {
    display:table-cell;
    vertical-align:bottom;
    height: 28px;
    padding-right: 8px;
}
.text_nav {
    color: #606266;
    width: 300px;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: 200px;
}
</style>
